<template>
  <div class="affix-container">
    <el-affix target=".affix-container" :offset="80">
      <el-select v-model="value" placeholder="方式">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        />
      </el-select>
    </el-affix>
  </div>
  <div id="main">
    <div id="send">
      <el-icon class="promptIcon" :size="promptIconSize" v-show="msgSend">
        <CircleCloseFilled v-if="promptIconShow" id="waringIcon"/>
        <SuccessFilled v-else/>
      </el-icon>
      <div>
        <el-input
            v-model="msg"
            id="input"
            class="w-50 m-2"
            size="large"
            placeholder="推送内容"
            @keyup.enter="sendMsg"
            @input="msgSend = false"
            clearable
            autofocus
            :disabled="settings.barkUrlIsNull"
        />
      </div>
      <div>
        <el-button type="primary" id="sendButton" @click="sendMsg" :disabled="settings.barkUrlIsNull"  round>推送</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { settings } from '/public/preload.js'
import axios from "../api/request";
import { WarningFilled,SuccessFilled,CircleCloseFilled } from '@element-plus/icons-vue'

// 功能选择
const value = ref(1);
const options = [
  {
    value: 1,
    label: 'bark',
    disabled: false,
  },
  {
    value: 2,
    label: '企业微信',
    disabled: true,
  },
];
// 输入框内容
const msg = ref('');
/**
 * 推送消息
 */
//设置title
let barkTitle = 'Pigeon';
if(settings.barkTitle != null && settings.barkTitle != 'null'){
  barkTitle = settings.barkTitle;
}
//设置icon
let barkIcon = settings.barkIcon;
async function sendMsg() {
  if (msg.value !== '') {
    const dto = {
      title: barkTitle,
      body: msg.value,
      icon: barkIcon,
    }
    const res = await axios.post(settings.wholeBarkUrl, dto);
    msgSend.value = true;
    if(res.data.code == '200'){
      promptIconShow.value = false;
    }
  }
}
//icon
const promptIconSize = '25px';
const promptIconShow = ref(true);
const msgSend = ref(false);
</script>

<style scoped>
#main{
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 130px;
}
#send{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#sendButton{
  padding: 18px;
  margin-left: 10px;
}

.affix-container {
  text-align: center;
  border-radius: 4px;
}
.promptIcon{
   padding: 8px;
 }
</style>